import React from 'react';
import { Form, Row, Col, Button, Icon } from 'antd';
import { initialSearchList } from '../private.config.data';
import QuickTool from '@/utils/Engineering/QuickTool';
const FormItem = Form.Item;

class SearchPart extends React.Component {
  //todo kim-stamp const { getFieldDecorator ,getFieldsError,resetFields,validateFields,setFieldsValue,setFields} = this.props.form
  state = {
    searchList: [],
    expand: false,
  };
  componentWillMount() {
    let sliceSearchNumber = (this.sliceSearchNumber = 3);
    let isOperate = initialSearchList.findIndex(item => item.form_type == '__operate');
    isOperate >= 0 && isOperate < sliceSearchNumber && ++this.sliceSearchNumber;
    this.setState({
      searchList: initialSearchList.slice(0, this.sliceSearchNumber),
    });
  }

  handleresetFields = () => {
    this.props.form.resetFields();
  };

  handleSubmit = () => {
    const { validateFields } = this.props.form;
    const { onSubmit } = this.props;
    validateFields((err: any, values: any) => {
      // if (err) return message.error('填写的参数不完整');
      let { __operate, ...__send_data_obj } = values;
      if (onSubmit) {
        onSubmit(__send_data_obj);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const getFormRender = () => {
      const getFormRenderList: Array<any> = [];
      let opera_default_sort = true;
      const { searchList } = this.state;
      let operaRender = (
        <Col span={6}>
          <FormItem
            label={<span></span>}
            colon={false}
            labelAlign="right"
            layout="inline"
            style={{ width: '100%' }}
            {...QuickTool.getformItemLayout({})}
          >
            {getFieldDecorator('__operate', {
              initialValue: '',
              rules: [{ required: false, message: '' }],
            })(
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Button type="primary" style={{ marginRight: 10 }} onClick={this.handleSubmit}>
                  {' '}
                  搜索{' '}
                </Button>
                <Button onClick={this.handleresetFields}>重置</Button>
                {initialSearchList && initialSearchList.length > this.sliceSearchNumber && (
                  <a style={{ marginLeft: 10, fontSize: 14 }}>
                    {this.state.expand ? (
                      <div
                        onClick={e =>
                          this.setState({
                            expand: false,
                            searchList: initialSearchList.slice(0, this.sliceSearchNumber),
                          })
                        }
                      >
                        收起<Icon type="up"></Icon>
                      </div>
                    ) : (
                      <div
                        onClick={e =>
                          this.setState({ expand: true, searchList: initialSearchList })
                        }
                      >
                        展开<Icon type="down"></Icon>
                      </div>
                    )}
                  </a>
                )}
              </div>,
            )}
          </FormItem>
        </Col>
      );

      {
        searchList &&
          searchList
            .sort((a, b) => a.sort - b.sort)
            .map((item, index) => {
              if (item.form_type != '__operate') {
                let fieldRender = (
                  <Col span={item.col || 8}>
                    <FormItem
                      key={item.dataIndex_or_field}
                      label={item.title_or_label}
                      labelAlign={item.labelAlign || 'right'}
                      layout={item.layout || 'inline'}
                      colon={item.colonfalse}
                      style={item.style || { width: '100%' }}
                      {...QuickTool.getformItemLayout(item)}
                    >
                      {getFieldDecorator(item.dataIndex_or_field, {
                        initialValue: item.initialValue || undefined,
                        rules: [
                          { required: item.required ? true : false, message: item.message || null },
                        ],
                      })(QuickTool.getFormFieldNodeRender(item))}
                    </FormItem>
                  </Col>
                );
                getFormRenderList.push(fieldRender);
              } else if (item.form_type == '__operate') {
                let fieldoperaRender = (
                  <Col span={6}>
                    <FormItem
                      label={<span></span>}
                      colon={false}
                      labelAlign="right"
                      layout="inline"
                      style={{ width: '100%' }}
                      {...QuickTool.getformItemLayout({})}
                    >
                      {getFieldDecorator('__operate', {
                        initialValue: '',
                        rules: [{ required: false, message: '' }],
                      })(
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                          <Button
                            type="primary"
                            style={{ marginRight: 10 }}
                            onClick={this.handleSubmit}
                          >
                            {' '}
                            搜索{' '}
                          </Button>
                          <Button onClick={this.handleresetFields}>重置</Button>
                          {initialSearchList && initialSearchList.length > this.sliceSearchNumber && (
                            <a style={{ marginLeft: 10, fontSize: 14 }}>
                              {this.state.expand ? (
                                <div
                                  onClick={e =>
                                    this.setState({
                                      expand: false,
                                      searchList: initialSearchList.slice(
                                        0,
                                        this.sliceSearchNumber,
                                      ),
                                    })
                                  }
                                >
                                  收起<Icon type="up"></Icon>
                                </div>
                              ) : (
                                <div
                                  onClick={e =>
                                    this.setState({ expand: true, searchList: initialSearchList })
                                  }
                                >
                                  展开<Icon type="down"></Icon>
                                </div>
                              )}
                            </a>
                          )}
                        </div>,
                      )}
                    </FormItem>
                  </Col>
                );
                // if (index != searchList.length - 1) {  }
                //如果【form_type == '__operate'】操作🦐🐔👨放，看他有没有自定义排序，要把它重置到最后去
                if (item.custom_sort) {
                  opera_default_sort = false;
                  getFormRenderList.push(fieldoperaRender);
                } else {
                  operaRender = fieldoperaRender;
                }
              }
            });
        opera_default_sort && getFormRenderList.splice(this.sliceSearchNumber, 0, operaRender);
        return getFormRenderList;
      }
    };
    return (
      <>
        <Form>
          <Row>{getFormRender()}</Row>
        </Form>
      </>
    );
  }
}

export default Form.create({
  name: 'global_state',
  onFieldsChange(props, changedFields) {},
  mapPropsToFields(props) {
    let obj = {};
    if (props.allFieldToValueObj) {
      for (let [k, v] of Object.entries(props.allFieldToValueObj)) {
        obj[k] = Form.createFormField({
          value: v,
        });
      }
      return obj;
    }
    return null;
  },
  onValuesChange(_, values) {},
})(SearchPart);
